<!-- EditInput 可转化的编辑框 -->
<template>
  <div class="row">
    <template v-if="!isEdit">
    <div class="dib">{{value|| defaultMsg}}</div>
     <zm-button class="dib ml10 el-icon-edit" @click="handleEdit" type="text"></zm-button>
    </template>

    <template v-else>
      <zm-input class="dib w150" v-model="editValue" />
      <zm-button class="dib" size="mini" @click="close" type="text">取消</zm-button>
      <zm-button class="dib" size="mini" @click="handleSubmit" type="text">确定</zm-button>
    </template>
</div>
</template>

<script>
export default {
  name: 'ZmEditInput',
  props: {
    value: {
      type: [String, Number]
    },
    defaultEdit: Boolean,
    defaultMsg: {
      type: String,
      default: '标题'
    }
  },
  data () {
    return {
      isEdit: false,
      editValue: ''
    }
  },

  watch: {
    // value (val) {
    //   if (!this.val) {
    //     this.$emit('input', this.defaultMsg)
    //   }
    // }
  },

  created () {
    this.init()
    if (!this.value) {
      this.$emit('input', this.defaultMsg)
    }
    // console.log(this.defaultMsg)
  },
  methods: {
    // 初始化方法
    init () {
      this.isEdit = this.defaultEdit || false
      if (this.isEdit) {
        this.handleEdit()
      }
    },

    handleEdit () {
      this.editValue = this.value
      this.isEdit = true
    },

    close () {
      this.isEdit = false
    },

    handleSubmit () {
      this.$emit('input', this.editValue)
      this.close()
    }

  }
}

</script>
<style lang='scss' >

</style>
